<%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<%@ page import="java.util.*,java.io.*,java.text.*,org.apache.commons.lang.StringEscapeUtils" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

	<script type="text/javascript">
		$(function() {
			
			$.ajaxSetup({
				  "error":function(XMLHttpRequest, textStatus, errorThrown) {   
					  /* alert(textStatus);
				      alert(errorThrown);
				      alert(XMLHttpRequest.responseText); */
				      alertMessage(XMLHttpRequest.responseText);
				}});
			
		});
		
		function loadSubProducts(url, id, containerId){
			$.getJSON(url, {
				id : id
			}, function(data) {
				
				//Sub-Product Display
				if (data != null && data.productSubList!=null && data.productSubList.length>0){
					var tabContainer = $("<div id='SubProdTabs'></div>");
					var ulList = $("<ul></ul>");
					
					$(ulList).appendTo($(tabContainer));
					
					for(var i=0; i<data.productSubList.length; i++){
						var productSubItem = data.productSubList[i];
						
						var imageFileId = productSubItem.imageFileId;
						var tabId = productSubItem.seq;
												
						var listItem = $("<li></li>");
						var tabLink = $("<a href='#tab-"+tabId+"'></a>");
						var tabDetailContainer = $("<div style='overflow:auto;' id='tab-"+tabId+"'></div>");
						
						var image = $("<img/>");
						$(image).attr({
							class:"thumbnail",
							src: "<c:url value='/file/image.html?id="+imageFileId+"' />"
							});
						$(image).appendTo($(tabDetailContainer));
						
						if (productSubItem.productList!=null && productSubItem.productList.length>0){
							for(var j=0; j<productSubItem.productList.length; j++){
								var productItem = productSubItem.productList[j];
								
								var cellDiv = document.createElement("div");
								var link = document.createElement("a");
								var image = document.createElement("img");
								//var desc = document.createElement("figure");
								
								var desc = $("<div class='row'></div>");
								var buttonAddProduct = $("<div class='cell'><button class='add_product_button' productId='"+productItem.seq+"' style='margin-left:20px;'>Thêm vào danh sách yêu cầu</button></div>");
								var descText = $("<span class='cell' style='vertical-align:middle;padding-left:5px;'></span>");
								
								var subProductCount = productItem.subProductCount;
								
								/* check image list */
								var imgList = new Array;
								if(productItem.fileId!=null && productItem.fileId.length>0){
									var fileIds = productItem.fileId.split(",");
									for(var k=0; k<fileIds.length; k++){
										var fileId = fileIds[k];
										var imgSrc = "<c:url value='/file/image.html?id="+fileId+"' />";
										imgList[imgList.length]=imgSrc;
									}
								}
								
								var param = new Array;
								param[0] = "productId="+productItem.seq;
								param[1] = "headerFileId="+productItem.fileId;
								
								$(cellDiv).attr({class:"detail_content_body_cell"});
								
								$(image).attr({
									class:"thumbnail_small",
									src: imgList[0],
									fileList: imgList.join(","),
									title : productItem.productName
									});
								
								//if there is subproduct -> go to sub product deail
								//else open fancy box
								if(subProductCount>0){
									$(link).attr({
										href:'javascript:cfGoToPage(\"<c:url value="/page/product.html" />\",\"sub_prod_detail\",\"'+param.join("&")+'\");'
										});
								}else{
									$(link).attr({
										href:'javascript:return;'
										});
									$(image).addClass("open_fancy_box");
								}
								
								//$(desc).text(product.productName);
								//$(desc).text(productItem.productCode);
								$(descText).text(productItem.productCode);
								$(buttonAddProduct).appendTo(desc);
								$(descText).appendTo(desc);
								
								$(image).appendTo(link);
								$(link).appendTo(cellDiv);
								$(desc).appendTo(cellDiv);
								
								$(cellDiv).appendTo($(tabDetailContainer));
							}
						}
						
						$(tabLink).text(productSubItem.name);
						//$(tabDetailContainer).text("Bui quang thong"+productSubItem.name);
						
						$(tabLink).appendTo($(listItem));
						$(listItem).appendTo($(ulList));
						
						$(tabDetailContainer).appendTo($(tabContainer));
						
					}
					
					$(tabContainer).appendTo($(containerId));
					
					// Tabs
					$('#SubProdTabs').tabs();
					//Bind event for small thumbnail image
					$(".open_fancy_box").bind("click",function(){
						setFancyBox(
							$(this)[0].attributes["fileList"].value.split(","),
							$(this)[0].attributes["title"].value
						);
					});
					//Set Button Style
					setButton('.add_product_button', false, "ui-icon-plus");
					//Bind event for button add product
					$(".add_product_button").bind("click",function(){
						addProduct($(this)[0].attributes["productId"].value);
					});
				}
			});
		}
		
		
		function loadProducts(url, id, containerId){
			
			$.getJSON(url, {
				id : id
			}, function(data) {
				//Product Display
				if (data != null && data.productList!=null && data.productList.length>0) {
					for(var i=0; i<data.productList.length; i++){
						var product = data.productList[i];
						createProductImage(product, containerId);
					}
					//Bind event for small thumbnail image
					$(".open_fancy_box").bind("click",function(){
						setFancyBox(
							$(this)[0].attributes["fileList"].value.split(","),
							$(this)[0].attributes["title"].value
						);
					});
					//Set Button Style
					setButton('.add_product_button', false, "ui-icon-plus");
					//Bind event for button add product
					$(".add_product_button").bind("click",function(){
						addProduct($(this)[0].attributes["productId"].value);
					});
				}
			});
		}
		
		function createProductImage(product, containerId){
			//var product = data.productList[i];
			var cellDiv = document.createElement("div");
			var link = document.createElement("a");
			var image = document.createElement("img");
			var desc = $("<div class='row'></div>");
			var buttonAddProduct = $("<div class='cell'><button class='add_product_button' productId='"+product.seq+"' style='margin-left:20px;'>Thêm vào danh sách yêu cầu</button></div>");
			var descText = $("<span class='cell' style='vertical-align:middle;padding-left:5px;'></span>");
			
			var subProductCount = product.subProductCount;
			
			/* check image list */
			var imgList = new Array;
			if(product.fileId!=null && product.fileId.length>0){
				var fileIds = product.fileId.split(",");
				for(var j=0; j<fileIds.length; j++){
					var fileId = fileIds[j];
					var imgSrc = "<c:url value='/file/image.html?id="+fileId+"' />";
					imgList[imgList.length]=imgSrc;
				}
			}
			
			var param = new Array;
			param[0] = "productId="+product.seq;
			param[1] = "headerFileId="+product.fileId;
			
			$(cellDiv).attr({class:"detail_content_body_cell"});
			
			$(image).attr({
				class:"thumbnail_small",
				src: imgList[0],
				fileList: imgList.join(","),
				title : product.productName
				});
			
			//if there is subproduct -> go to sub product deail
			//else open fancy box
			if(subProductCount>0){
				$(link).attr({
					href:'javascript:cfGoToPage(\"<c:url value="/page/product.html" />\",\"sub_prod_detail\",\"'+param.join("&")+'\");'
					});
			}else{
				$(link).attr({
					href:'javascript:return;'
					});
				$(image).addClass("open_fancy_box");
			}
			
			//$(desc).text(product.productName);
			$(descText).text(product.productCode);
			$(buttonAddProduct).appendTo(desc);
			$(descText).appendTo(desc);
			
			$(image).appendTo(link);
			$(link).appendTo(cellDiv);
			$(desc).appendTo(cellDiv);
			
			$(cellDiv).appendTo($(containerId));
		}
		
		
	</script>
